<script setup>
import { Chart } from '@vue-chart/echart'
import {categoryData} from "~/logic";

const props = defineProps([
  'dataSource',
])
const showChart = ref(true)
const goodsNumber = ref({
  tmall: 0,
  taobao: 0,
})
const saleNumber = ref({
  tmall: 0,
  taobao: 0,
})
props.dataSource.forEach((item, index) => {
  if (item.isTmall) {
    goodsNumber.value.tmall++
    saleNumber.value.tmall += parseInt(item.sold ? item.sold : 0)
  }
  else {
    goodsNumber.value.taobao++
    saleNumber.value.taobao += parseInt(item.sold ? item.sold : 0)
  }
})
const platform = ref(1)
const dataList = ref()

const seriesData = () => {
  return [
    {
      value: platform.value === 1 ? goodsNumber.value.taobao : saleNumber.value.taobao,
      name: '淘宝',
    },
    {
      value: platform.value === 1 ? goodsNumber.value.tmall : saleNumber.value.tmall,
      name: '天猫',
    },
  ]
}
const options = ref({
  color: ['#ff5f00', '#1890ff'],
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'horizontal',
    // orient: 'vertical',
    left: 'center',
  },
  series: [
    {
      name: '店铺类型',
      type: 'pie',
      radius: '50%',
      data: [
        ...seriesData(),
      ],
    },
  ],
})
const changeOptions = () => {
  showChart.value = false
  options.value.series[0].data = seriesData()
  nextTick(() => {
    showChart.value = true
  })
}
// 深度监听 dataSource
watch(() => props.dataSource, (newVal) => {
  goodsNumber.value.tmall = 0
  goodsNumber.value.taobao = 0
  saleNumber.value.tmall = 0
  saleNumber.value.taobao = 0
  // newVal.forEach((item, index) => {
  //   if (item.isTmall) {
  //     goodsNumber.value.tmall++
  //     saleNumber.value.tmall += parseInt(item.sold ? item.sold : 0)
  //   }
  //   else {
  //     goodsNumber.value.taobao++
  //     saleNumber.value.taobao += parseInt(item.sold ? item.sold : 0)
  //   }
  // })

  const arr = [];
  let totalSale = 0
  newVal.forEach((item, index) => {
    let found = false;
    for (let i = 0; i < arr.length; i++) {
      totalSale += item.realSales? parseInt(item.realSales.match(/\d+/)[0]) : 0;
      if (item.leafCategory === arr[i].leafCategory) {
        arr[i].goodsTotal++;
        arr[i].goodsPercentage = ((arr[i].goodsTotal / newVal.length) * 100).toFixed(2) + '%';
        arr[i].saleTotal += item.realSales ? parseInt(item.realSales.match(/\d+/)[0]) : 0;
        arr[i].salePercentage = ((arr[i].saleTotal / newVal.length) * 100).toFixed(2) + '%';
        found = true;
        break;
      }
    }
    if (!found) {
      arr.push({
        leafCategory: item.leafCategory,
        platform: categoryData[item.leafCategory]?.name || '--',
        goodsTotal: 1,
        goodsPercentage: ((1 / newVal.length) * 100).toFixed(2) + '%',
        saleTotal: item.realSales ? parseInt(item.realSales.match(/\d+/)[0]) : 0,
        salePercentage: ((1 / newVal.length) * 100).toFixed(2) + '%',
      });
    }
  });
  dataList.value = arr.map(item => {
    item.salePercentage = ((item.saleTotal / totalSale)* 100).toFixed(2) + '%';
    return {
      ...item
    }
  });
  console.log('arr',dataList.value);

  changeOptions()
}, {
  deep: true,
  immediate: true

})
</script>

<template>
  
  <a-row type="flex">
    <a-col flex="1">
      <a-table
        :pagination="false"
        :columns="[
          {
            dataIndex: 'platform',
            title: '类目',
          },
          {
            dataIndex: 'goodsNumber',
            title: '商品数量',
          },
          {
            dataIndex: 'saleNumber',
            title: '付款人数',
          },
        ]"
        :data-source="dataList"
        :scroll="{ y: 150 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'goodsNumber'">
            <div> {{ record.goodsTotal }} </div>
            <div> {{ record.goodsPercentage }} </div>
          </template>
          <template v-if="column.dataIndex === 'saleNumber'">
            <div> {{ record.saleTotal }} </div>
            <div> {{ record.salePercentage }} </div>
          </template>
        </template>
      </a-table>
    </a-col>
  </a-row>
</template>

<style lang="less" scoped>

</style>
